import React from 'react';
import { Decoration1Props } from './interface';
import './index.less';

const defaultProps: Decoration1Props = {
  borderWidth: 100,
  vertex: false,
  backgroundImage:
    'radial-gradient(rgba(30, 83, 127, 0.2), rgba(30, 83, 127, 0.2), rgba(30, 83, 127, 0.8))',
};

/**
 * hexagon
 * @author hupeng
 * @datetime 2021-1-15 10:02
 */
const Decoration1: React.FC<Decoration1Props> & {
  defaultProps: Partial<Decoration1Props>;
} = props => {
  const { borderWidth, backgroundImage, vertex, children, style } = props;

  const transform = vertex ? '' : 'rotate(90deg)';

  return (
    <div
      className="dv-decoration-1"
      style={{ width: borderWidth, height: borderWidth, ...style }}
    >
      <div className="hex-item" style={{ backgroundImage, transform }} />
      {children ? (
        <div className="dv-decoration-content">{children}</div>
      ) : null}
    </div>
  );
};

Decoration1.defaultProps = defaultProps;

export default Decoration1;
